<template>
  <view class="songlist_view">
        <!-- 歌单图片 -->
    <image :src="list_image" class="songlist_image"></image>
        <!-- 歌单介绍 -->
    <view class="songlist_introduce">
    
      <view class="song_list_introduce">
        <text>{{songlist_title}}</text>
        <view class="songlist_introduce_icon">
          <text>{{songlist_introduce}}</text>
          <uni-icons type="forward" color="#7A7A7A" size="20"></uni-icons>
        </view>
      </view>
        <!-- 用户 -->
      <view class="songlist_user">
        <view class="">
          <image :src="user_image"></image>
          <text>{{user_name}}</text>
          <uni-icons type="plus-filled" color="#7A7A7A" size="20"></uni-icons>
        </view>
        <uni-icons class="songlist_ting" color="#7A7A7A" type="headphones" size="20"></uni-icons>
      </view>

      <view class="songlist_icon">
        <view class="">
          <uni-icons type="heart-filled" color="#ffffff" size="30"></uni-icons>
        </view>
        <view class="">
          <uni-icons type="chat-filled" color="#ffffff" size="30"></uni-icons>
        </view>
        <view class="">
          <uni-icons type="redo-filled" color="#ffffff" size="30"></uni-icons>
        </view>
      </view>
    </view>

    <view class="songlist_all">
      <view class="songlist_all_one" @click="play_music(item.songmid,item.songname,item.singer[0].name)" v-for="item,index in songlist" :key="index">
        <text>{{index+1}}</text>
        <view class="">
          <text>{{item.songname}}</text>
          <text>{{item.singer[0].name}}&nbsp;{{item.albumname}}</text>
        </view>
        <image src="/static//songlist/more.png" mode=""></image>
      </view>
    </view>
    <music></music>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list_image: '',
        songlist_title: '',
        songlist_introduce: '',
        user_image: '',
        user_name: '',
        songlist: '',

      };
    },
    onLoad:async function(res) {
      uni.showLoading({
        mask:true,
        title:"稍等片刻，歌曲即将到来"
      })
      let list=await uni.$http.get("songlist?id="+res.id)
      list=list.data.data
      this.list_image = list.logo
      this.songlist_title = list.dissname
      this.songlist_introduce = list.desc
      this.user_image = list.headurl
      this.user_name = list.nick
      this.songlist = list.songlist
      setTimeout(()=>{
        uni.hideLoading()
      },1500)
    },
    methods:{
      play_music(id,name,singer){
        this.$clickPlayMusic(id,name,singer)
      },
    }
  }
</script>

<style lang="scss">
  @mixin _flex($flex) {
    display: flex;
    flex-direction: $flex;
  }

  @mixin scroll {

    /* 更改滚动条大小 */
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
      color: transparent;
    }
  }
  
  .songlist_view {
    width: 100vw;
    height: 100vh;
    position: absolute;
    overflow-y:scroll;
    @include scroll()
  

  .songlist_image {
    width: 100vw;
    height: 60vh;
    &::after{
      position: absolute;
      top:25vh;
      content: "";
      width: 100vw;
      height: 25vh;
      background-image:linear-gradient(180deg, rgba(26,26,26,0), rgba(26,26,26,0.9) ,rgba(26,26,26,1) );
    }
  }

  .songlist_introduce {
    position: absolute;
    top:30vh;
    width: 100%;
    z-index: 10;
    @include _flex(column) 
    color: white;
    .song_list_introduce {
      width: 90%;
      padding: 0 5%;
      
      >text {
        line-height: 40rpx;
        margin: 10rpx 0;
        font-size: 40rpx;
        font-weight: bold;
        height: 50rpx;
        overflow: hidden;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        box-orient: vertical;
        display: -webkit-box;
        display: box;
      }
      
      .songlist_introduce_icon {
        @include _flex(row)
        width: 90%;
        color: #9A9A9A;
        >text {
          line-height: 30rpx;
          margin: 10rpx 0;
          font-size: 27rpx;
          height: 30rpx;
          overflow: hidden;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          -webkit-box-orient: vertical;
          box-orient: vertical;
          display: -webkit-box;
          display: box;
        }
      }
    }

    .songlist_user {
      width: 90%;
      padding: 0 5%;
      height: 100rpx;
      @include _flex(row)
      align-items: center;
      >view {
        @include _flex(row)
        align-items: center;
        width: 49%;
        > image {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
        }
        > text {
          font-size: 25rpx;
          padding: 0 10rpx;
        }
      }

      >.songlist_ting {
        padding-left: 1%;
        width: 49%;
      }
    }

    .songlist_icon {
      background-color: #1A1A1A;
      width: 90%;
      padding: 0 5%;
      @include _flex(row) justify-content: space-between;
    }
  }
  
  .songlist_all {
    background-color: #1A1A1A;
    position: absolute;
    top:53vh;
    @include _flex(column)
    width: 90vw;
    padding:0 5%;
    color: white;
    > .songlist_all_one {
      margin: 20rpx 0;
      @include _flex(row)
      align-items: center;
      justify-content: space-between;
      > text {
        text-align: center;
        width: 5vw;
      }
      > view {
        @include _flex(column)
        width: 55vw;
         >text {
           line-height: 40rpx;
           margin: 5rpx 0;
           font-size: 32rpx;
           width: 55vw;
           height: 40rpx;
           overflow: hidden;
           -webkit-line-clamp: 1;
           line-clamp: 1;
           -webkit-box-orient: vertical;
           box-orient: vertical;
           display: -webkit-box;
           display: box;
         }
         > text:nth-child(2){
           font-size: 26rpx;
           color: #9A9A9A;
         }
      }
      
      > image {
        height: 50rpx;
        width: 50rpx;
      }
    }
  }
}
</style>
